<!DOCTYPE html>
<html lang="zh-CN"> <!-- lang属性定义页面主要语言为简体中文，帮助浏览器和搜索引擎识别语言类型 -->
<head>
  <meta charset="UTF-8"> <!-- 声明字符编码，确保中文等字符正常显示 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 适配移动设备屏幕 -->
  <title>HTML文本与图片标签示例</title> <!-- 定义网页标题，显示在浏览器标签栏 -->
  <style>
    body { font-family: "Microsoft YaHei", sans-serif; line-height: 1.6; padding: 20px; max-width: 800px; margin: 0 auto; }
    .article { border-bottom: 1px solid #ccc; padding-bottom: 20px; margin-bottom: 20px; }
    .img-container { text-align: center; margin: 20px 0; }
    .img-container img { max-width: 100%; height: auto; border-radius: 8px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }
    .highlight { background-color: #fff3cd; padding: 2px 4px; border-radius: 4px; }
  </style>
</head>
<body>
  <header>
    <h1>欢迎来到自然探索</h1> <!-- h1是最高级标题，代表页面核心主题，一个页面建议只使用一次 -->
    <p>探索大自然的奥秘与美丽</p> <!-- p标签定义段落文本，自动在前后添加换行和间距 -->
  </header>

  <div class="article">
    <h2>森林生态系统</h2> <!-- h2为二级标题，用于划分页面主要章节，层级低于h1 -->
    <p>森林是地球上最重要的生态系统之一，它为无数生物提供栖息地，并在调节气候方面发挥着关键作用。</p>

    <div class="img-container">
      <!-- img标签用于插入图片，src指定图片路径（本地或网络地址） -->
      <!-- alt为图片无法加载时的替代文本，提升可访问性且利于SEO -->
      <!-- title为鼠标悬停时显示的提示文本，补充图片说明 -->
      <img src="https://images.unsplash.com/photo-1501004318641-b39e6451bec6?q=80&w=1000&auto=format&fit=crop"
           alt="茂密的森林景观，阳光透过树叶洒在地面上"
           title="森林生态系统">
      <p>图1: 温带森林景观</p>
    </div>

    <h3>森林的重要性</h3> <!-- h3为三级标题，用于细分章节内容，层级低于h2 -->
    <ul> <!-- ul定义无序列表，用于展示并列的、无顺序的内容 -->
      <li>提供氧气和吸收二氧化碳</li> <!-- li是列表项，用于包裹列表中的每个元素 -->
      <li>保护生物多样性</li>
      <li>防止水土流失</li>
      <li>提供木材和其他林产品</li>
    </ul>

    <p>研究表明，<strong>全球森林面积</strong>正在以每年约<strong>1300万公顷</strong>的速度减少。保护森林已成为当务之急。</p> <!-- strong标签使文本加粗，强调重要内容（语义化强调，非仅样式） -->
  </div>

  <div class="article">
    <h2>海洋生物多样性</h2>
    <p>海洋覆盖了地球表面的约71%，是生物多样性最丰富的区域之一。从微小的浮游生物到巨大的蓝鲸，海洋中生活着各种奇妙的生物。</p>

    <div class="img-container">
      <!-- width和height属性定义图片显示尺寸（建议同时设置以避免页面布局抖动），实际大小受CSS限制 -->
      <img src="https://images.unsplash.com/photo-1502784444187-359ac186c5bb?q=80&w=1000&auto=format&fit=crop"
           alt="珊瑚礁与热带鱼"
           title="海洋生物多样性"
           width="600"
           height="400">
      <p>图2: 丰富多彩的珊瑚礁生态系统</p>
    </div>

    <p>以下是海洋保护的几个关键点：</p>
    <ol> <!-- ol定义有序列表，用于展示有先后顺序的内容，默认以数字编号 -->
      <li>建立海洋保护区</li>
      <li>减少海洋污染</li>
      <li>可持续渔业管理</li>
      <li>应对气候变化</li>
    </ol>
  </div>

  <div class="article">
    <h2>环境保护行动</h2>
    <p>每个人都可以为环境保护贡献力量。以下是一些简单而有效的方法：</p>

    <blockquote> <!-- blockquote标签定义长引用内容，浏览器通常会自动缩进显示 -->
      <p>"我们不是继承了地球，而是借用了它。"</p>
      <footer>— 非洲谚语</footer> <!-- footer用于标注引用的来源信息 -->
    </blockquote>

    <ul>
      <li>减少一次性塑料使用</li>
      <li>节约水电资源</li>
      <li>支持可持续产品</li>
      <li>参与植树造林活动</li>
    </ul>

    <p>通过这些行动，我们可以为子孙后代留下一个更美好的地球家园。</p>
  </div>

  <footer>
    <p>&copy; 2025 自然探索协会 | <a href="mailto:info@naturaldiscovery.org">联系我们</a></p> <!-- a标签用于创建链接，mailto:协议实现邮件发送功能 -->
  </footer>
</body>
</html>